<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--<head>
    <meta charset="utf-8">
    <title>tab切换</title>
    <style type="text/css">
        *{padding:0;margin:0;font:normal 15px "微软雅黑";color:#000;}
        ul{list-style-type: none;padding-left: 5px;margin-bottom: -2px}
        .tab{width:500px;margin: 10px auto}
        a{text-decoration: none;}
        .title li{display: inline-block;border: 1px solid #999;border-bottom: 2px solid #a00;background: #fff;text-align: center;width: 60px;height: 30px;margin: 0 1px;line-height: 30px}
        .title .active{border-top:2px solid #a00;border-bottom: 2px solid #fff; }
        #content{margin: 0;border: 1px solid #ccc;border-top: 2px solid #a00;width: 300px}
        #content div{display: none;padding: 10px 0}
        #content .mod{display: block;}
    </style>
</head>-->


<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".tab2 li").click(function() {
            //            var $this=$(this);
            //            alert($this.index());
            $(this).addClass("active").siblings().removeClass("active");
            $("#content .mod").eq($(".tab2 li").index(this)).show().siblings("#content .mod").hide();
        });
    });

</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/top.css">

</head>


<body>
    <!--顶部导航-->
    <div class="headr">
        <div class="top-box">
            <div>
                <div class="l">
                    &nbsp;&nbsp;&nbsp;智雷众筹平台
                </div>

                <div class="c">
                    <a href="#">搜索</a>&nbsp;|&nbsp;&nbsp;
                </div>

                <div class="rt">
                    <input type="text" placeholder="请输入搜索内容" class="search">
                </div>

                <div class="rl">
                    <a href="#">我的众筹(<span>3</span>)</a>&nbsp;|&nbsp;&nbsp; &nbsp;
                    <a href="#">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">免费注册</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div>
            <ul class="tab2">
                <li class="item1 active"><a href="#" style="color: #434343;font-family: 微軟正黑體">我支持的众筹</a></li>
                <li class="item1"><a href="#" style="color: #434343;font-family: 微軟正黑體">我发起的众筹</a></li>
                <li class="item1"><a href="#" style="color: #434343;font-family: 微軟正黑體">我的收藏</a></li>
                <!--<li><a href="#">家居</a></li>-->
            </ul>
        </div>
    </div>

    <!-- 往下面添加内容 -->
    <div class="tab1">
        <div class="block">
            <div id="content">

                <!-- 我支持的众筹 -->
                <div class="mod">
                    <div class="screen">
                        <div class="screen-time">
                            <span class="active margin_right20">按发起时间排序</span>
                            <span>按加入时间排序</span>
                        </div>
                        <div class="screen-type">
                            <span class='active margin_right20'>全部</span>
                            <span>已过期</span>
                        </div>
                    </div>
                    <ul class="goods-list">

                        <!-- each遍历表单内容 -->
                        <li class="goods-item" th:each="orders:${orderList}">
                            <div class="goods-img" >
                                <img src="../images/1.png" alt="">
                            </div>
                            <div class="goods-title"
                                 th:text="${orders.name}">

                            </div>
                             <div class='goods_mes'>
                                <span>关注:<span
                                        th:text="${orders.numberCollect}">
                                </span></span>
                                <span>支持:<span
                                    th:text="${orders.numberSupport}">
                                </span></span>
                             </div>
                            <div class="goods-progress">

                                    <!--用来模仿进度条推进效果的进度条元素-->
<!--                                    <span th:if="${orders.progress2<=100.0}">-->
                                        <!--进度条容器-->
                                        <div class="progressbar">
                                          <div th:style="'background:#6caf00;height:100%;width:'+*{orders.progress}+''">
                                          </div>
                                        </div>
<!--                                    </span>-->
<!--                                    <span th:if="${orders.progress2>=100.0}">-->
<!--                                        <div class="progressbar">.-->
<!--                                          <div th:style="'text-align:center;background:#6caf00;height:100%;width:100%'">-->
<!--                                          </div>-->
<!--                                         </div>-->
<!--                                    </span>-->

                                <span class="tip">众筹中</span>
                            </div>
                            <div class="goods-result">
                                <div>已筹集:<span
                                        th:text="${orders.moneyHaved}">
                                </span></div>
                                <div>达成:<span
                                        th:text="${orders.progress}">
                                </span></div>
                            </div>
                        </li>
                    </ul>
                </div>


                <!-- 我发起的众筹 -->
                <div class="mod" style="display: none">
                    <div class="screen">
                        <div class="screen-time">
                            <span class='active margin_right20'>按发起时间排序</span>
                            <span>按加入时间排序</span>
                        </div>
                        <div class="screen-type">
                            <span class='active margin_right20'>全部</span>
                            <span>已过期</span>
                        </div>
                    </div>
                    <ul class="goods-list">

                        <!-- each遍历表单内容 -->
                        <li class="goods-item" th:each="orders:${myProList}">
                            <div class="goods-img">
                                <img src="../images/2.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30"
                                 th:text="${orders.name}"></div>

                            <div class='goods_mes'>
                                <span>关注:<span
                                        th:text="${orders.numberCollect}">
                                </span></span>
                                <span>支持:<span
                                        th:text="${orders.numberSupport}">
                                </span></span>
                            </div>

                            <div class="goods-progress">
                                <!--进度条容器-->
                                <div class="progressbar">
                                    <!--用来模仿进度条推进效果的进度条元素-->
                                    <span th:if="${orders.progress2<=100.0}">
                                        <div th:style="'text-align:center;
                                            background:#6caf00;height:100%;
                                            width:'+*{orders.progress}+''">
                                        </div>
                                    </span>
                                    <span th:if="${orders.progress2>100.0}">
                                        <div th:style="'text-align:center;
                                            background:#6caf00;height:100%;
                                            width:100%'">
                                        </div>
                                    </span>
                                </div>
                                <span class="tip">众筹中</span>
                            </div>

                            <div class="goods-result">
                                <div>已筹集:<span
                                        th:text="${orders.moneyHaved}">
                                </span></div>
                                <div>达成:<span
                                        th:text="${orders.progress}">
                                </span></div>
                            </div>

                          <div class='goods-target'>完成众筹目标中<span> </span></div>
                            <div>筹资天数:<span
                                    th:text="${orders.daysTotal}">
                                </span></div>
                        </li>

                    </ul>
                </div>

                <!-- 我收藏的众筹 -->
                <div class="mod" style="display: none">
                    <div class="screen">
                        <div class="screen-time">
                            <span class="active margin_right20">按发起时间排序</span>
                            <span>按加入时间排序</span>
                        </div>
                        <div class="screen-type">
                            <span class="active margin_right20">全部</span>
                            <span>已过期</span>
                        </div>
                    </div>
                    <ul class="goods-list">

                        <!-- each遍历表单内容 -->
                        <li class="goods-item" th:each="orders:${myColProList}">
                            <div class="goods-img">
                                <img src="../images/3.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30"
                                 th:text="${orders.name}"></div>

                            <div class='goods_mes'>
                                <span>关注:<span
                                        th:text="${orders.numberCollect}">
                                </span></span>
                                <span>支持:<span
                                        th:text="${orders.numberSupport}">
                                </span></span>
                            </div>

                            <div class="goods-progress">
                                <!--进度条容器-->
                                <div class="progressbar">
                                    <!--用来模仿进度条推进效果的进度条元素-->
                                    <span th:if="${orders.progress2<=100.0}">
                                        <div th:style="'text-align:center;
                                            background:#6caf00;height:100%;
                                            width:'+*{orders.progress}+''">
                                        </div>
                                    </span>
                                    <span th:if="${orders.progress2>100.0}">
                                        <div th:style="'text-align:center;
                                            background:#6caf00;height:100%;
                                            width:100%'">
                                        </div>
                                    </span>
                                </div>
                                <span class="tip">众筹中</span>
                            </div>
                          <div class='goods-target'>完成众筹目标中<span></span></div>
                            <div>筹资天数:<span
                                    th:text="${orders.daysTotal}">
                                </span></div>
                        </li>

                        <!--
                        <li class="goods-item">
                            <div class="goods-img">
                                <img src="../images/3.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30">罗永浩的演讲之道</div>
                            <div class="goods-progress">
                                进度条容器
                                  <div id="progressbar">
                                  用来模仿进度条推进效果的进度条元素
                                      <div id="fill"></div>
                                  </div>
                          </div>
                          <div class='goods-target'>完成众筹目标<span>2/8</span></div>
                        </li>-->

                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>

</html>